<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>022-3D变换_透视点的位置</title>
		<style>
			.outer {
				width: 200px;
				height: 200px;
				border: 2px solid black;
				margin: 100px auto;

				/* 1. 给父元素开启3D空间 */
				transform-style: preserve-3d;

				/* 2. 设置景深(近大远小效果) */
				perspective: 500px;

				/* 设置透视点的位置：透视点就是观察者的位置，默认透视点在元素的中心。*/
				/* 相对坐标轴往右偏移400px，往下偏移300px（相当于人蹲下300像素，然后向右移动400像素，看观察元素） */
				/* perspective-origin: 400px 300px; */
			}

			.inner {
				width: 200px;
				height: 200px;
				background-color: skyblue;
				/* 3. 设置旋转 */
				transform: rotateX(40deg);
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner">你好啊</div>
		</div>
	</body>
</html>
